<template>
  <view class="orderGoods">
    <!-- <view class="total">共{{ cartInfo.length }}件商品</view> -->
    <view class="total">商品信息</view>
    <view class="goodWrapper">
      <view v-for="cart in cartInfo" :key="cart.id">
        <view class="item acea-row row-between-wrapper">
          <view class="pictrue"
            ><image :src="cart.productInfo.image" class="image"
          /></view>
          <view class="text">
            <view class="acea-row row-between-wrapper">
              <view class="name line1">{{ cart.productInfo.storeName }}</view>
              <!-- <view class="num">x {{ cart.cartNum }}</view> -->

              <view
                class="money font-color-red"
                v-if="isIntegral"
                style="margin: 0"
                >{{ cart.costPrice }}积分</view
              >
              <view class="money font-color-red" v-else style="margin: 0"
                >￥{{ cart.truePrice }}</view
              >
            </view>
            <view class="attr line1" v-if="cart.productInfo.attrInfo">
              <view class="num">{{ cart.productInfo.attrInfo.sku }}</view>
              <view class="num">x {{ cart.cartNum }}</view>
            </view>
            <!-- <view class="time">付款后，3天内发货</view> -->

            <view
              class="evaluate"
              v-if="evaluate == 3 && cart.isReply == 0"
              @click="routerGo(cart)"
              >评价</view
            >
          </view>
        </view>
        <view class="shopping" v-if="isShow">
          <view class="joinCart" @click="joinCart(cart)">
            <text>加入购物车</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { getProductDetail, postCartAdd } from '@/api/store'

export default {
  name: 'OrderGoods',
  props: {
    evaluate: Number,
    cartInfo: {
      type: Array,
      default: () => [],
    },
    isShow: Boolean,
    isIntegral: Boolean,
  },
  data: function () {
    return {
      goods: {},
    }
  },
  mounted: function () {},
  methods: {
    routerGo(cart) {
      this.$yrouter.push({
        path: '/packageShop/pages/shop/GoodsEvaluate/index',
        query: { id: cart.unique },
      })
    },

    //产品详情接口；
    productCon(cart) {
      let id = cart.productId
      let from = {
        latitude: '',
        longitude: '',
      }
      getProductDetail(id, from)
        .then(res => {
          this.goods = res.data.productValue[`${cart.productInfo.attrInfo.sku}`]
          console.log('产品数据', cart, res, this.goods)
          this.goCat(0)
        })
        .catch(err => {
          console.log(err, 'err---------------')
          uni.showToast({
            title:
              err.msg || err.response.data.msg || err.response.data.message,
            icon: 'none',
            duration: 2000,
          })
        })
        .finally(() => {
          uni.hideLoading()
        })
    },

    //  点击加入购物车按钮
    joinCart(cart) {
      console.log('this.cat', cart)
      this.productCon(cart)
    },
    // 加入购物车；
    goCat(news) {
      if (this.goods.stock <= 0) {
        uni.showToast({
          title: '产品库存不足，请选择其它',
          icon: 'none',
          duration: 2000,
        })
        return
      }
      let q = {
        productId: this.goods.productId,
        cartNum: 1,
        new: news,
        uniqueId: this.goods !== undefined ? this.goods.unique : '',
      }
      console.log('提交数据', q, this.goods)
      postCartAdd(q)
        .then(function (res) {
          uni.showToast({
            title: '添加购物车成功',
            icon: 'success',
            duration: 2000,
          })
        })
        .catch(error => {
          console.log(error)
          this.isOpen = false
          uni.showToast({
            title:
              error.msg ||
              error.response.data.msg ||
              error.response.data.message,
            icon: 'none',
            duration: 2000,
          })
        })
    },
  },
}
</script>
<style lang="less">
.pictrue {
  margin-right: 24rpx !important;
  width: 160rpx !important;
  height: 160rpx !important;
  border-radius: 20rpx !important;
  overflow: hidden;
  .image {
    width: 160rpx !important;
    height: 160rpx !important;
  }
}
.text {
  flex: 1 !important;
}
.name {
  width: 385rpx !important;
}
.shopping {
  display: flex;
  justify-content: flex-end;
  padding: 30rpx 30rpx 24rpx 0;
  .joinCart {
    width: 160rpx;
    height: 56rpx;
    border-radius: 32rpx;
    border: 1px solid #e6e6e6;
    font-size: 24rpx;
    line-height: 56rpx;
    text-align: center;
  }
}
.shopping {
  display: flex;
  justify-content: end;
  padding: 30rpx 30rpx 24rpx 0;
  .joinCart {
    width: 160rpx;
    height: 56rpx;
    border-radius: 32rpx;
    border: 1px solid #e6e6e6;
    font-size: 24rpx;
    line-height: 56rpx;
    text-align: center;
  }
}
.attr {
  margin-top: 8rpx !important;
  margin-bottom: 17rpx !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.time {
  display: inline-block !important;
  // width: 202px;
  height: 32rpx;
  border-radius: 8rpx;
  border: 1px solid #ff6010;
  padding: 0px 6rpx;

  font-size: 22rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ff6010;
  line-height: 30rpx;
}
.goodWrapper .item {
  border: 0 !important;
}
.goodWrapper .item {
  border: 0 !important;
}
.goodWrapper .item .text .evaluate {
  position: absolute;
  width: 80rpx;
  height: 36rpx;
  line-height: 36rpx;
  border: 1px solid #e6e6e6;
  color: #666;
  border-radius: 52rpx;
  text-align: center;
  font-size: 24rpx;
  right: 0;
  bottom: -0.4 * 100rpx;
}

.orderGoods {
  margin-left: 0 !important ;
  margin-right: 0 !important;
}
.shopping {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.orderGoods .total {
  border: 0 !important;
}
</style>
